// components/nav-bar/nav-bar.ts
Component({

    /**
     * 组件的属性列表
     */
    properties: {
      // 相当于鸿蒙的 @Prop 装饰器
      // @Prop back: boolean = false
      back: {
        type: Boolean,  // 小程序这里类型是大写开头
        value: false
      },
      // back: Boolean,  // 如果没有默认值，可简写
    },
  
    // 小程序组件样式：默认是样式隔离的
    // 组件接受的外部样式类，样式由外部传进来给组件使用，以外部样式为准，组件内就不行了
    //  wxml:
    //    <nav-bar custom-class="xxxx"></nav-bar>
    //  wxss:
    //     .xxxx { 样式 }
    externalClasses: ['custom-class', 'title-class'],
  
    options: {
      // 在组件定义时的选项中启用多slot支持 (建议开启)
      multipleSlots: true,
      // 关闭组件样式隔离，要求组件类名更规范，可添加前缀标识，避免类名冲突 (建议开启)
      addGlobalClass: true
    },
  
    /**
     * 组件的初始数据
     */
    data: {
      safeAreaTop: 0,
    },
  
    /**
     * 组件的声明周期对象
     */
    lifetimes: {
      // 在组件实例刚刚被创建时执行，注意此时不能调用 setData
      created() { },
      // 在组件实例进入页面节点树时执行，相当于 Vue 的 onMounted，鸿蒙的 onDidBuild
      attached() {
        // 获取窗口信息
        const windowInfo = wx.getWindowInfo()
        this.setData({
          // 安全区域左上角纵坐标，用于避开顶部状态栏和摄像头，单位为 px
          safeAreaTop: windowInfo.safeArea.top
        })
      },
      // 在组件实例被从页面节点树移除时执行（销毁）
      detached() { },
    },
  
    /**
     * 组件所在页面的生命周期声明对象
     */
    pageLifetimes: {
      hide() {
        console.log('页面隐藏（切后台）')
      },
      show() {
        console.log('页面显示（切前台）')
      }
    },
  
    /**
     * 组件的方法列表
     */
    methods: {
      comLeftClick() {
        // 触发自定义事件，调用父组件传过来的回调函数
        // this.triggerEvent('自定义事件名称', 子传父的参数)
        this.triggerEvent('left-click', { aa: 11 })
      }
    }
  })